<template>
  <div class="globalLifecycle-container">
    <section class="top">
      <div class="title">
        <PmBreadcrumb />
        <span style="font-weight: 400; font-size: 18px; line-height: 22px"
          >生命周期管理</span
        >
        <el-icon size="10" style="margin: 0 6px"><ArrowRight /></el-icon>
        <span>{{ route.query.lifecycle }}</span>
      </div>
      <div style="display: flex; gap: 12px"></div>
    </section>
    <div class="lifecycleCanvas">
      <editLifecycle :lifecycleId="route.query.id as string" mode="edit" />
    </div>
  </div>
</template>
<script setup lang="ts">
  import PmBreadcrumb from "@/components/PmBreadcrumb.vue";
  import editLifecycle from "@/views/pm/globalSetting/globalLifecycle/lifecycle/editLifecycle.vue";
  import { ArrowRight } from "@element-plus/icons-vue";
  import { useRoute } from "vue-router";
  const route = useRoute();
</script>

<style scoped lang="scss">
  .globalLifecycle-container {
    display: flex;
    flex-direction: column;
    //padding: 16px;
    height: 100%;
    box-sizing: border-box;
  }
  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    .title {
      font-weight: 500;
      font-size: 18px;
      line-height: 22px;
    }
  }
  .lifecycleCanvas {
    flex: 1;
  }
</style>
